<template>
  <div class="type-tree">
    <template v-if="topitemSelectList !== null">
      <el-tree ref="tree" class="tree-content" :props="treerule" :data="topitemSelectList" highlight-current check-strictly accordion :node-key="'equipmentTypeCode'" @node-click="handleTreeQuery" />
    </template>
    <template v-else>
      <div class="loading">加载中...</div>
    </template>
  </div>
</template>

<script>
import equipTypeApi from '@/api/processing-management/equip-manage/equip-type/index';
import EquipModelApi from '@/api/processing-management/equip-manage/equip-model';
export default {
  props: {
    pageNo: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      treerule: {
        children: 'childList',
        label: 'equipmentTypeName'
      },
      equipmentTypeCode: '',
      topitemSelectList: null,
      selectedIndex: 0
    };
  },
  mounted() {
    this.queryParentList();
  },
  methods: {
    queryTable(equipmentTypeCode) {
      this.$emit('topitemtype', equipmentTypeCode, this.equModelArr);
    },
    selectEquModelCode(item) {
      this.$emit('selectEquModelCode', item);
    },
    // 查询最父级的类型
    queryParentList() {
      this.loading = true;
      // 查询表格
      equipTypeApi.queryAll().then(res => {
        this.loading = false;
        // 赋值数组
        if (res.code === 1) {
          let data = res.data || [];
          data = data.filter(item => item.equipmentTypeName.includes('加工'));
          this.topitemSelectList = data;
          this.handleTreeQuery(data[0]);
        }
      });
    },
    handleTreeQuery(node) {
      EquipModelApi.queryAllEquModel(node.equipmentTypeCode).then(res => {
        this.loading = false;
        if (res.code === 1) {
          let data = res.data || [];
          const equModelArr = [];
          for (var i in data) {
            equModelArr.push({
              modelName: data[i],
              equModelCode: i
            });
          }
          this.$emit('updateEquModelArr', equModelArr);
          this.$emit('changeType', node.equipmentTypeCode);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.type-tree {
  height: 100%;
  width: 100%;
}
.title-content {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  color: #fff;
  background-color: #024e66 !important;
  border: #2f8aa2 1px solid;
  > div {
    text-align: center;
    border-right: #2f8aa2 1px solid;
    &:last-of-type {
      border-right: 0;
    }
  }
}

.tree-content {
  height: calc(100% - 20px);
  overflow-y: auto;
  overflow-x: hidden;
}

::v-deep .el-tree-node__content {
  background-color: #0cb28c !important;
}
.current-hight-line {
  background-color: rgb(12, 178, 140);
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  cursor: pointer;
  &:hover {
    background-color: #0cb28c !important;
    .custom-tree-node-btns {
      display: block !important;
    }
  }
}
</style>
